<!--
 * @author: Kate-sy
 * @create: 2021-06-21 17:50 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-28 14:35 PM
 * @desc: 
-->
<template>
  <div class="secnav-conter">
    <div
      class="secard"
      :key="item.onenav"
      v-for="item in senavdata"
      @click="secarClick(item.twonav, $event)"
    >
      {{ item.onenav }}
      <div class="secite-wrap">
        <div class="secite" :key="it" v-for="it in item.twonav">{{ it }}</div>
      </div>
    </div>
    <div class="sec-endtag" v-show="setagnone">标签管理</div>
  </div>
</template>
<script>
export default {
  name: "Secondnav",
  data() {
    return {
      setagnone: false,
      senavdata: [
        {
          onenav: "推荐",
          id: 1,
          twonav: [],
        },
        {
          onenav: "后端",
          id: 3,
          twonav: [
            "后端",
            "JAVA",
            "Go",
            "Python",
            "MySQL",
            "Redis",
            "Spring Boot",
            "数据库",
            "Spring",
            "算法",
            "Kubrenetes",
            "Linux",
            "JVM",
            "架构",
            "Spring Cloud",
          ],
        },
        {
          onenav: "前端",
          id: 4,
          twonav: [
            "前端",
            "JavaScript",
            "Vue.js",
            "React.js",
            "CSS",
            "Webpack",
            "Node.js",
            "面试",
            "算法",
            "TypeScript",
            "Flutter",
            "微信小程序",
            "前端框架",
            "性能优化",
            "浏览器",
          ],
        },
        {
          onenav: "Android",
          id: 5,
          twonav: [
            "Android",
            "Flutter",
            "前端",
            "Kotlin",
            "Android Jetpack",
            "Java",
            "性能优化",
            "架构",
            "设计模式",
            "面试",
            "算法",
            "源码",
            "gradle",
            "OpenCV",
            "音视频开发",
          ],
        },
        {
          onenav: "iOS",
          id: 6,
          twonav: [
            "iOS",
            "Swift",
            "前端",
            "Objective-C",
            "Flutter",
            "Cocoa",
            "OpenGL",
            "逆向",
            "SwiftUI",
            "算法",
            "macOS",
            "音视频开发",
            "RxSwift",
            "面试",
            "架构",
          ],
        },
        {
          onenav: "人工智能",
          id: 7,
          twonav: [
            "人工智能",
            "算法",
            "机器学习",
            "Python",
            "后端",
            "深度学习",
            "数据分析",
            "数据库",
            "NLP",
            "物联网",
            "百度",
            "大数据",
            "监控",
            "数据可视化",
            "数据挖掘",
          ],
        },
        {
          onenav: "开发工具",
          id: 8,
          twonav: [
            "Git",
            "前端",
            "GitHub",
            "Docker",
            "Python",
            "开源",
            "后端",
            "云计算",
            "游戏开发",
            "Kubernetes",
            "Linux",
            "Java",
            "IntelliJ IDEA",
            "音视频开发",
            "mPaaS",
          ],
        },
        {
          onenav: "代码人生",
          id: 9,
          twonav: [
            "程序员",
            "前端",
            "算法",
            "Python",
            "后端",
            "Java",
            "面试",
            "LeetCode",
            "代码规范",
            "测试",
            "架构",
            "数据结构",
            "Linux",
            "运维",
            "鸿蒙OS",
          ],
        },
        {
          onenav: "阅读",
          id: 10,
          twonav: [
            "程序员",
            "前端",
            "产品",
            "后端",
            "设计模式",
            "面试",
            "数据库",
            "Flink",
            "测试",
            "macOS",
            "Java",
            "音视频开发",
            "笔记",
            "掘金翻译计划",
            "RSS",
          ],
        },
      ],
    };
  },
  methods: {
    secarClick(da, e) {
      let secard = document.querySelectorAll(".secard");
      secard.forEach((ele) => {
        ele.style.cssText = "color: #71777c;";
      });
      e.target.style.cssText = "color: #007fff;";
      this.$emit("secarClick", da, e);
    },
  },
  mounted() {
    if (localStorage.getItem("token")) {
      this.senavdata.push({ onenav: "关注", id: 2 });
      this.setagnone = true;
      this.senavdata.sort((a, b) => {
        return a.id - b.id;
      });
    } else {
      console.log(this.senavdata);
    }
  },
};
</script>
<style lang="scss" scoped>
.secnav-conter {
  display: flex;
  height: 46px;
  width: 960px;
  margin: auto;
  .secard {
    height: 100%;
    @include flex(none, center);
    padding-right: 24px;
    @include font(14px, #71777c);
    position: relative;
    z-index: 1000;
    &:hover {
      color: #007fff;
      cursor: pointer;
    }
    &:hover .secite-wrap {
      display: flex;
      color: #71777c;
    }
    .secite-wrap {
      position: absolute;
      display: none;
      flex-wrap: wrap;
      bottom: -204px;
      left: -12px;
      padding: 14px;
      width: 332px;
      height: 175px;
      z-index: 10000;
      background-color: #fff;
      box-shadow: 0px 0px 2px rgb(189, 189, 189);
      .secite {
        @include flex(center, center);
        font-size: 13px;
        padding: 0px 12px;
        height: 25px;
        margin-right: 14px;
        border-radius: 25px;
        margin-bottom: 12px;
        background-color: #f4f5f5;
        &:hover {
          color: #007fff;
          display: flex;
        }
      }
    }
  }
  .sec-endtag {
    position: absolute;
    top: 13px;
    right: 0;
    @include font(13px, #71777c);
    &:hover {
      color: #007fff;
    }
  }
}
.secnav-conter .secard:nth-of-type(1) {
  color: #007fff;
  &:hover .secite-wrap {
    display: none;
  }
}
</style>